var ButtonMenu = $('#show-hide-menu');
var openClassMenu = 'display-menu';
var closedClassMenu = 'hidden-menu';

ButtonMenu.click(function(event){
	event.preventDefault();
	beforeShowMenu();
	showHideMenu();
	afterHideMenu();
	changeButtonStyle();
});

function changeButtonStyle(){
	if(isOpen){
		ButtonMenu.removeClass(closedClassMenu);
		ButtonMenu.addClass(openClassMenu);
		ButtonMenu.empty().html('Ocultar Menú');
		ButtonMenu.attr("title","Ocultar el Menú Lateral");
	}else{
		ButtonMenu.removeClass(openClassMenu);
		ButtonMenu.addClass(closedClassMenu);
		ButtonMenu.empty().html('Mostrar Menú');
		ButtonMenu.attr("title","Mostrar el Menú Lateral");
	}
}

function showHideMenu(isOpen){
	desactiveButton();
	var opacityValue = '0.25';
	if(!isOpen){
		opacityValue = '1';
	}
	$('#lef-menu').delay(50).animate({
			opacity:opacityValue,
			width:'toggle'
		},250,function(){
			if(!isOpen){
				rebote($(this));
			}else{
				activeButton();
			}
		}
	);
}

function rebote(element){
	element.animate({
			width:'9%'
		},300,function(){
			reboteStop(element);
		}
	);
}

function reboteStop(element){
	element.animate({
			width:'13%'
		},100,function(){
				activeButton();
			}
	);
}

function setWidthContainer(newWidth,delayTime){
	$('#rigth-content').delay(delayTime).animate({
		width:''+newWidth
	},250);
}

function beforeShowMenu(){
	var newWidth = '';
	if(!isOpen){
		newWidth = '87%';
		setWidthContainer(newWidth,30);
	}
}

function afterHideMenu(){
	var newWidth = '';
	if(isOpen){
		newWidth = '100%';
		setWidthContainer(newWidth,50);
		isOpen = false;
	}else{
		isOpen = true;
	}
}

function activeButton(){
	ButtonMenu.removeAttr("disabled");
}

function desactiveButton(){
	ButtonMenu.attr("disabled", "disabled");
}